// signalChart 信号图表
import { useState } from "react";
// @mui material components
import Card from "@mui/material/Card";
import Icon from "@mui/material/Icon";
import AppBar from "@mui/material/AppBar";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import PropTypes from "prop-types";
// Soft UI Dashboard PRO React components
import SoftBox from "components/SoftBox";
import SoftTypography from "components/SoftTypography";
import SoftSelect from "components/SoftSelect";
import SoftButton from "components/SoftButton";
import SoftBadge from "components/SoftBadge";

import team1 from "assets/images/team-1.jpg";
import SoftAvatar from "components/SoftAvatar";

export default function SignalChart() {
  return (
    <SoftBox mt={6}>
      <Card>
        <SoftBox display="flex" justifyContent="space-between" alignItems="center" p={3}>
          <SoftBox flex="1" border="1px solid #EEEFF4" height="100%">

          </SoftBox>
          <SoftBox width="506px">
            <SoftBox display="flex" flexDirection="column" p={3} borderBottom="1px solid #EEEFF4">
              <SoftBox display="flex" alignItems="center" mb={3}>
                <SoftAvatar src={team1} sx={{ mr: 2, width: 40, height: 40 }}></SoftAvatar>
                <SoftTypography variant="h5" fontWeight="medium" fontSize="30px">
                  Bitcoin/USDT
                </SoftTypography>
              </SoftBox>
              <SoftTypography variant="caption" fontSize="16px" color="secondary">
                Price
              </SoftTypography>
              <SoftTypography variant="h5" fontSize="20px">
                $ 67008.67
              </SoftTypography>
              <SoftBadge
                variant="contained"
                color="success"
                container
                badgeContent={
                  <SoftBox color="success" display="flex" alignItems="center" lineHeight={0}>
                    <Icon>arrow_upward</Icon>2.53%
                  </SoftBox>
                }
              />
            </SoftBox>
            <SoftBox p={3} display="flex" justifyContent="center">
              <SoftButton  variant="gradient" color="info" sx={{width: '100%', textTransform: 'capitalize'}}>
                <Icon sx={{ mr: "4px"}}>favorite</Icon>
                Add Favorites
              </SoftButton>
            </SoftBox>
          </SoftBox>
        </SoftBox>
      </Card>
    </SoftBox>
  );
}
